<!--
 * @Author: your name
 * @Date: 2021-12-29 17:38:11
 * @LastEditTime: 2022-02-17 13:49:12
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\components\menu\index.vue
-->
<template>
  <div class="messageArea-container" id="messageArea">
      <DataForm @submit="submit"/>
      <div class="messageArea-contaienr-title">{{title}}（<span class="subTitle">{{subTitle}}</span>）</div>
      <DataList :list="list"/>
  </div>
</template>

<script>
import DataForm from "./components/dataForm.vue"
import DataList from "./components/dataList.vue"
import eventBus from "@/utils/eventBus" //事件总线

export default {
    created(){
        
        eventBus.$on("handleScroll", this.loadMore)
    },
    components:{
        DataForm,
        DataList,
    },
    props:{
        // 列表标题
        title:{
            type:String,
            default:""
        },
        // 列表父标题
        subTitle:{
            type:Number,
        },
        // 列表数据
        list:{
            type:Array,
            default:() => [],
        },
        // 列表是否正在加载中
        isListLoading:{
            type:Boolean,
            default:false,
        },
    },
    methods:{
        // 用户点击提交时触发
        submit(params, callback){
            this.$emit("submit",params,callback)
        },
        loadMore(html){
            // console.log(html.scrollHeight -( html.scrollTop + html.clientHeight))
            if(html.scrollHeight -( html.scrollTop + html.clientHeight) <= 200){
                this.isLoading = true
            }else{
                this.isLoading = false
            }
        }
    }
}
</script>

<style scoped lang="less">
.messageArea-container{
    width:100%;
    box-sizing: border-box;
    // font-size:12px;
    margin:30px 0px;
}
</style>